<template>
  <div>
    <FixedOperation>
      <!-- 内容 -->
      <el-row :gutter="20">
        <!--产品分类-->
        <el-col :span="24" :xs="24">
          <div class="text-right">
            <el-button
              :disabled="formData.createBy !== userStore.userInfo.userName"
              type="primary"
              @click="handleUpdate"
              >编辑</el-button
            >
            <el-button
              :disabled="formData.createBy !== userStore.userInfo.userName"
              plain
              type="primary"
              @click="handleDelete"
              >删除</el-button
            >
            <!-- <el-button icon="Refresh" @click="handleReset(form)"
              >重置</el-button
            > -->
          </div>
        </el-col>
      </el-row>
    </FixedOperation>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="24" class="m-b-6">
          <el-descriptions :column="1" :size="'small'" border>
            <el-descriptions-item label="数据来源" label-class-name="w-1/6">
              <dict-drop
                :options="knowledge_source"
                :value="formData.source"
              ></dict-drop>
            </el-descriptions-item>
            <el-descriptions-item label="业务类型">
              <dict-drop
                :options="knowledge_business_type"
                :value="formData.businessType"
              ></dict-drop>
            </el-descriptions-item>
            <el-descriptions-item label="所属分类">
              <dict-drop
                :options="knowledge_type"
                :value="formData.type"
              ></dict-drop>
            </el-descriptions-item>
            <el-descriptions-item label="问题描述"
              ><div v-html="formData.content"></div
            ></el-descriptions-item>
            <el-descriptions-item label="处理方案"
              ><div v-html="formData.solution"></div
            ></el-descriptions-item>
            <el-descriptions-item label="所属模块">
              <dict-drop
                :options="knowledge_module"
                :value="formData.module"
              ></dict-drop>
            </el-descriptions-item>
            <el-descriptions-item label="附件">
              <div v-for="item in formData.fileList" :key="item.fileName">
                <el-link :href="item.url" :underline="false" type="primary">{{
                  item.origFileName
                }}</el-link>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="来电号码">{{
              formData.phone
            }}</el-descriptions-item>
            <el-descriptions-item label="问题发生地">
              <dict-drop
                :options="problem_site"
                :value="formData.site"
              ></dict-drop>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup name="KnowledgeDetails">
import { useRouter, useRoute } from 'vue-router'
import useCommonStore from '@/store/modules/common'
import useUserStore from '@/store/modules/user'
import { getKnowledgeDetail, delKnowledge } from '@/api/officeManage/knowledge'
import useTagsViewStore from '@/store/modules/tagsView'

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const commonStore = useCommonStore()
const { proxy, type } = getCurrentInstance()
const companyData = ref([])
commonStore.getCompanyData().then(e => {
  companyData.value = e
})

const {
  problem_site,
  knowledge_source,
  knowledge_business_type,
  knowledge_type,
  knowledge_module
} = proxy.useDict(
  'problem_site', //问题发生地
  'knowledge_source', //知识库来源
  'knowledge_business_type', //知识库业务类型
  'knowledge_type', //知识库所属分类
  'knowledge_module' //知识库中新增所属模块
)

const props = defineProps({
  knowledgeData: {
    type: Object,
    require: true,
    default: null
  }
})

const data = reactive({
  formData: { fileList: [] }
})
const { formData } = toRefs(data)

watch(
  () => route.query.knowledgeId,
  () => {
    if (route.query.knowledgeId && route.name == type.name) {
      getFormData(route.query.knowledgeId)
    }
  },
  {
    immediate: true
  }
)
// 初始化
function init() {}
/** 获取产品详情
 * @param {number}  id 表单id
 */
function getFormData(id) {
  return new Promise((resolve, reject) => {
    getKnowledgeDetail(id).then(async res => {
      let resData = {}
      resData = res.data
      formData.value = { ...formData.value, ...resData }
      resolve(res)
    })
  })
}

function goTo(url, data) {
  router.push({ path: url, query: data })
}
/**修改按钮操作 */
function handleUpdate(row) {
  goTo('/rsgl/other/knowledgeForm', { knowledgeId: formData.value.id })
}
/** 删除按钮操作 */
function handleDelete(row) {
  const knowledgeIds = formData.value.id
  proxy.$modal
    .confirm('是否删除')
    .then(function () {
      return delKnowledge(knowledgeIds)
    })
    .then(() => {
      proxy.$modal.msgSuccess('删除成功')
      handleReturn()
    })
    .catch(() => {})
}
// 返回、关闭页面
function handleReturn() {
  useTagsViewStore().delView(router.currentRoute.value)
  router.go(-1)
  // router.push({ path: url, query: data })
  //   proxy.$refs.form.clearValidate()
}
init()
</script>
<style scoped></style>
